<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业</title>
    <style>
        .w{
            background-color: aqua;
            height: 300px;
            width: 300px;
            border-radius: 150px;
            box-shadow:10px 10px rgb(121, 150, 150);
        }
        .q1{
            animation-name: q1;
            animation-duration: 4s;
            animation-iteration-count: infinite;
        }
        .q2{
            animation-name: q2;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-delay: 0.5s;
        }.q3{
            animation-name: q3;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-delay: 1s;
        }.q4{
            animation-name: q4;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-delay: 1.5s;
        }.q5{
            animation-name: q5;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-delay: 2s;
        }.q6{
            animation-name: q6;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-delay: 2.5s;
        }.q7{
            animation-name: q7;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-delay: 3s;
        }.q8{
            animation-name: q8;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-delay: 3.5s;
        }
            .q9{
            animation-name: q9;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-delay: 4s;
        }  
        
        .j{
           width: 150px;
           height: 100px;
            margin: 0 auto;
            top: 50%;
            position: relative;
            font-size: 25px;
            animation-name: wjh;
            animation-duration: 3s;
            animation-iteration-count: infinite;
            transform: style preserve -3d
        }
        @keyframes wjh{
            0%{color: rgb(248, 10, 10);transform:translateX(0px) translateZ(75px) translateY(5px) rotateY(0deg);}
            25%{color: rgb(7, 2, 255);transform:translateX(50px) translateZ(0px) translateY(0px) rotateY(90deg);}
            50%{color: rgb(43, 255, 0);transform:translateX(0px) translateZ(-75px) translateY(-5px) rotateY(180deg);}
            75%{color: rgb(251, 255, 0);transform:translateX(-50) translateZ(0px) translateY(5px) rotateY(270deg);}
            100%{color: black;transform:translateX(0px) translateZ(75px) translateY(0px) rotateY(0deg);}
        }
        @keyframes q1{
            0%{color: rgb(0, 0, 0);}
            12.5%{color: rgb(131, 0, 55);}
            25%{color: rgb(195, 0, 255);}
            37.5%{color: rgb(89, 0, 255);}
            50%{color: rgb(0, 80, 253);}
            62.5%{color: rgb(0, 153, 255);}
            75%{color: rgb(0, 255, 42);}
            87.5%{color: rgb(255, 251, 0);}
            100%{color: rgb(248, 10, 10);}

        }
        @keyframes q2{
            0%{color: rgb(0, 0, 0);}
            12.5%{color: rgb(131, 0, 55);}
            25%{color: rgb(195, 0, 255);}
            37.5%{color: rgb(89, 0, 255);}
            50%{color: rgb(0, 80, 253);}
            62.5%{color: rgb(0, 153, 255);}
            75%{color: rgb(0, 255, 42);}
            87.5%{color: rgb(255, 251, 0);}
            100%{color: rgb(248, 10, 10);}

        }@keyframes q3{
            0%{color: rgb(0, 0, 0);}
            12.5%{color: rgb(131, 0, 55);}
            25%{color: rgb(195, 0, 255);}
            37.5%{color: rgb(89, 0, 255);}
            50%{color: rgb(0, 80, 253);}
            62.5%{color: rgb(0, 153, 255);}
            75%{color: rgb(0, 255, 42);}
            87.5%{color: rgb(255, 251, 0);}
            100%{color: rgb(248, 10, 10);}

        }@keyframes q4{
            0%{color: rgb(0, 0, 0);}
            12.5%{color: rgb(131, 0, 55);}
            25%{color: rgb(195, 0, 255);}
            37.5%{color: rgb(89, 0, 255);}
            50%{color: rgb(0, 80, 253);}
            62.5%{color: rgb(0, 153, 255);}
            75%{color: rgb(0, 255, 42);}
            87.5%{color: rgb(255, 251, 0);}
            100%{color: rgb(248, 10, 10);}

        }@keyframes q5{
            0%{color: rgb(0, 0, 0);}
            12.5%{color: rgb(131, 0, 55);}
            25%{color: rgb(195, 0, 255);}
            37.5%{color: rgb(89, 0, 255);}
            50%{color: rgb(0, 80, 253);}
            62.5%{color: rgb(0, 153, 255);}
            75%{color: rgb(0, 255, 42);}
            87.5%{color: rgb(255, 251, 0);}
            100%{color: rgb(248, 10, 10);}

        }@keyframes q6{
            0%{color: rgb(0, 0, 0);}
            12.5%{color: rgb(131, 0, 55);}
            25%{color: rgb(195, 0, 255);}
            37.5%{color: rgb(89, 0, 255);}
            50%{color: rgb(0, 80, 253);}
            62.5%{color: rgb(0, 153, 255);}
            75%{color: rgb(0, 255, 42);}
            87.5%{color: rgb(255, 251, 0);}
            100%{color: rgb(248, 10, 10);}

        }@keyframes q7{
            0%{color: rgb(0, 0, 0);}
            12.5%{color: rgb(131, 0, 55);}
            25%{color: rgb(195, 0, 255);}
            37.5%{color: rgb(89, 0, 255);}
            50%{color: rgb(0, 80, 253);}
            62.5%{color: rgb(0, 153, 255);}
            75%{color: rgb(0, 255, 42);}
            87.5%{color: rgb(255, 251, 0);}
            100%{color: rgb(248, 10, 10);}

        }@keyframes q8{
            0%{color: rgb(0, 0, 0);}
            12.5%{color: rgb(131, 0, 55);}
            25%{color: rgb(195, 0, 255);}
            37.5%{color: rgb(89, 0, 255);}
            50%{color: rgb(0, 80, 253);}
            62.5%{color: rgb(0, 153, 255);}
            75%{color: rgb(0, 255, 42);}
            87.5%{color: rgb(255, 251, 0);}
            100%{color: rgb(248, 10, 10);}
        }@keyframes q9{
            0%{color: rgb(0, 0, 0);}
            12.5%{color: rgb(131, 0, 55);}
            25%{color: rgb(195, 0, 255);}
            37.5%{color: rgb(89, 0, 255);}
            50%{color: rgb(0, 80, 253);}
            62.5%{color: rgb(0, 153, 255);}
            75%{color: rgb(0, 255, 42);}
            87.5%{color: rgb(255, 251, 0);}
            100%{color: rgb(248, 10, 10);}

        }
    </style>
</head>
<body>
    
    <script>
        for(var i=1;i<=9;i++){
            for(var j=1;j<=i;j++){
                document.write("<span class=q"+j+">"+j+"*"+i+"="+i*j+"</span>");
				if(i==3&&j==2){ document.write("&nbsp&nbsp");}if(i==4&&j==2){ document.write("&nbsp&nbsp");}
                document.write("&nbsp&nbsp&nbsp&nbsp&nbsp");
            }
            document.write("</br>");
        }
        document.write("<div class='w'><div class='j'>巫俊华的作业</div></div>")
    </script>
</body>
</html>